<style lang="scss" scoped>
.login{ height:100vh; background:#fff;
	  .box{ position: absolute; max-width:70%; left:0; right:0; margin:auto; position: fixed; top:20%; 
			  .logo{ width:250rpx; display:block; margin:auto;}
					.line{height:1px; background:#f1f1f1; margin:40rpx 0;}
					.tx1{ color:#333;}
					.tx2{color:#999; padding-top:20rpx;}
					.tit{ text-align:center; color:$main-color; font-size:35rpx; font-weight: bold;}
					.btn{ margin-top:40rpx;}
					.input{ margin-top:30rpx; .intxt{ border-radius:80rpx; border:1px solid #eee; padding:0 40rpx; height:80rpx; line-height:80rpx; width:100%;} }
					.accpass{ text-align:center; padding-top:15rpx; color:#999;}
			}
}
</style>
<template>
	<view class="login">
		 <view class="box" v-if="!bind">
				<template v-if="type==1">
						<view><image src="/static/logo.png" mode="widthFix" class="logo"></image></view>
						<view class="line"></view>		
						<view class="tx1">申请获取以下权限</view>
						<view class="tx2">获得您的公开信息(呢称，头像等)</view>
						<button open-type="getUserInfo" @getuserinfo="getUerInfo" class="btn">微信授权登录</button>
						<view class="accpass" @tap="type=2">账号密码登录</view>
				</template>
				<template v-if="type==2">
					<view class="tit">账号密码登录</view>
					<view class="input"><input type="mobile" maxlength="11" v-model="form.mobile" class="intxt" placeholder="请输入手机号"></view>
					<view class="input"><input type="password" maxlength="20" v-model="form.userpass" class="intxt" placeholder="请输入密码"></view>
					<button class="btn" @tap="doLogin">登录</button>
					<view @tap="type=1" class="accpass">授权登录</view>
				</template>
			</view>
			<view class="box" v-else>
				 <view><image src="/static/logo.png" mode="widthFix" class="logo"></image></view>
				 <view class="line"></view>
				 <button open-type="getPhoneNumber" @getphonenumber="bindMobile" class="btn">绑定手机号</button> 
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 bind:false,
				 userInfo:null,
					type:1,
					sessionKey:'',
					form:{
						 mobile:'',
							userpass:'',
					}
			}
		},
		onLoad() {

		},
		methods: {
			
			 //获取jscode
				async getUerInfo(e){
					 this.userInfo = e.detail.userInfo;
						var that = this;
					 wx.login({
					 	success(res) {
					 		that.getOpenid(res.code);
					 	}
					 })
				},
				
				//获取OPENID
				async getOpenid(jscode){
					 const json = await this.api.getOpenId({q:{jscode:jscode}})
						if(json.data.code==0){
							 let data = json.data.data;
							 this.app.globalData.openid = data.openid;
								uni.setStorage({key:'openid',data:data.openid})
								this.sessionKey = data.sessionKey;  //后台返回sessionkey用作解密手机号
							 this.login(data.unionid);
						}
				},
				
				//处理登录
				async login(unionid){
					  var that = this;
					  let params = {
								  unionid: unionid, //多端登录唯一unionid
								  openid: this.app.globalData.openid,		//小程序openid 	
									 head:this.userInfo.avatarUrl, //用户头像
									 name:this.userInfo.nickName, //名字
									 gender:this.userInfo.gender  //姓别
							}
					  const json = await this.api.xcxLogin({q:params});
							if(json.data.code==0){
								 let result = json.data.data;
								 this.app.globalData.userInfo = result;
									uni.setStorage({key:'userInfo',data:result})
								  if(result.mobile==null){
											 uni.showModal({
											 	  title:'温馨提示',
															showCancel:false,
															content:'首次授权登录须绑定手机号',
															success(res){
																  that.bind = true;
															}
											 })
										}else{
											 this.loginGo(result); 
										}
							}
				},
				
				//绑定手机号
				async bindMobile(e){
					if(e.detail.errMsg=="getPhoneNumber:fail user deny"){
						uni.showModal({
							title:'温馨提示',
							showCancel:false,
							content:'拒绝绑定手机号部份功能将不能使用'
						})
					}else{
						const json = await this.api.bindMobile({q:{encryptedData:e.detail.encryptedData,iv:e.detail.iv,sessionKey:this.sessionKey,unionid:this.app.globalData.userInfo.unionid,openid:this.app.globalData.openid}})
						if(json.data.code==0){
							this.loginGo(json.data.data);
						}
					}
				},			
			
			 //登录跳转
				async loginGo(info){
					  this.app.globalData.userInfo = info;
					  uni.setStorage({key:'userInfo',data:info})
					  let res = await uni.getStorage({key:'loginReturnUrl'})
					  if(res[1]){
					  	uni.removeStorage({key:'loginReturnUrl'});					  
					  	uni.reLaunch({url:res[1].data})
					  }else{
					  	uni.reLaunch({url:'/pages/index/index'})
					  }
				},
				
				//手机号密码登录
				async doLogin(){
					  if(this.form.mobile==""){ this.api.toast("请输入手机号"); return false; }					  
							if(this.form.mobile.length!=11){ this.api.toast("手机号格式错误"); return false; }		
							if(this.form.userpass==""){ this.api.toast("请输入密码"); return false; }		
							const json = await this.api.mobileLogin({q:this.form});
							if(json.data.code==0){
								  let result = json.data.data;
								  this.app.globalData.userInfo = result;
								  uni.setStorage({key:'userInfo',data:result})
								  this.loginGo(result);
							}
				}
								
		}
	}
</script>
